@charset 'UTF-8';

@font-face {
	font-family: 汉仪文黑;
	src: local("汉仪文黑"), url("../fonts/compressed/HYWenHei-75W.ttf");
}

@font-face {
	font-family: 微软雅黑;
	src: local("微软雅黑"), url("../fonts/compressed/MicrosoftYaHei.ttf");
}

$bg-dark-primary: #512da8;
$bg-primary: #673ab7;
$bg-light-primary: #d1c4e9;
$txt-light-primary: #ffffff;
$txt-dark-secondary: #616161;

$max-width-1: 480px;
$max-width-2: 880px;

html {
	margin: 0;
	padding: 0;

	* {
		margin: 0;
		padding: 0;

		font-family: 微软雅黑;
	}

	h1 {
		font-size: 1.8rem;

		@media (max-width: $max-width-1) {
			font-size: 1.2rem;
		}
	}

	h3 {
		font-size: 1.2rem;

		@media (max-width: $max-width-1) {
			font-size: 1rem;
		}
	}

	p {
		font-size: 1rem;

		@media (max-width: $max-width-1) {
			font-size: 0.8rem;
		}
	}

	a {
		text-decoration: none;
	}

	.tablet-border-bottom {
		@media (max-width: $max-width-2) {
			border-bottom-style: solid;
			border-width: 1px;
			border-bottom-color: $txt-light-primary;
		}
	}

	.hidden {
		visibility: hidden;
	}

	body {
		background-color: $bg-light-primary;

		overflow: hidden;

		header {
			#nav {
				width: 100%;
				height: 4rem;

				position: fixed;
				top: 0;
				z-index: 1;

				background-color: $bg-primary;

				display: flex;
				justify-content: space-between;
				align-items: center;

				@media (max-width: $max-width-2) {
					background-color: transparent;

					flex-direction: column;
					align-items: flex-end;
				}

				@media (max-width: $max-width-1) {
					height: 3rem;
				}

				#nav-left {
					width: 25rem;
					height: 4rem;

					background-color: $bg-dark-primary;

					display: flex;
					justify-content: space-between;
					align-items: center;

					@media (max-width: $max-width-2) {
						width: 100%;
					}

					@media (max-width: $max-width-1) {
						height: 3rem;
					}

					h1 {
						padding: 0 0 0.2rem 0;

						a {
							font-family: 汉仪文黑;
							color: $txt-light-primary;
						}
					}

					button {
						margin: 0 1.5rem;
						padding: 0 0 0.3rem 0;

						background: transparent;
						border: none;

						@media (max-width: $max-width-1) {
							margin: 0 1rem;
							padding: 0.3rem 0;
						}

						img {
							width: 1.6rem;

							display: none;

							@media (max-width: $max-width-2) {
								display: block;
							}

							@media (max-width: $max-width-1) {
								width: 1rem;
							}
						}
					}
				}

				#nav-right {
					height: 1.5rem;

					background-color: $bg-primary;

					display: flex;
					justify-content: center;

					@media (max-width: $max-width-2) {
						width: 15rem;
						height: 0;

						visibility: hidden;
					}

					@media (max-width: $max-width-1) {
						width: 100%;
					}

					ul {
						list-style-type: none;

						display: flex;

						@media (max-width: $max-width-2) {
							width: 80%;
							height: 16rem;

							flex-direction: column;
							justify-content: space-around;
							align-items: center;
						}

						@media (max-width: $max-width-1) {
							height: 12rem;
						}

						li {
							margin: 0 2rem 0 0;

							@media (max-width: $max-width-2) {
								width: 100%;
								height: 25%;

								margin: 0;

								display: flex;
								justify-content: center;
								align-items: center;
							}

							a {
								color: $txt-light-primary;

								@media (max-width: $max-width-1) {
									font-size: 0.9rem;
								}

								img {
									width: 1.3rem;

									margin: 0 3rem 0 0.5rem;

									@media (max-width: $max-width-2) {
										margin: 0;
									}

									@media (max-width: $max-width-1) {
										width: 1rem;
									}
								}
							}
						}
					}
				}
			}
		}

		main {
			display: flex;
			justify-content: center;

			.main {
				width: 40rem;
				height: 0;

				margin: 4rem 0 0 0;

				display: flex;
				flex-direction: column;
				align-items: center;

				@media (max-width: $max-width-2) {
					width: 35rem;
				}

				@media (max-width: $max-width-1) {
					width: 100%;

					margin: 3rem 0 0 0;
				}
			}

			.individual {
				margin: 0.5rem;

				display: flex;
				align-items: center;

				img {
					width: 2.5rem;
					height: 2.5rem;

					margin: 0.5rem;

					border-radius: 50%;
				}

				#right {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
				}
			}
		}
	}
}